<template>
  <vxe-modal
    v-model="dialogFormVisible"
    :title="title"
    width="30%"
    show-footer
    destroy-on-close
    :loading="fullscreenLoading"
    @close="close"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :data="form"
        :rules="rules"
        title-align="right"
        title-width="120"
        prevent-submit
      >
        <vxe-form-item title="上级单位名称" span="24">
          <template #default>
            <el-input v-model="form.parentName" type="text" readonly />
          </template>
        </vxe-form-item>
        <vxe-form-item title="编码" span="24" field="code">
          <template #default>
            <el-input v-model="form.code" type="text" readonly />
          </template>
        </vxe-form-item>
        <vxe-form-item title="名称" span="24" field="name">
          <template #default>
            <el-input v-model="form.name" type="text" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="负责人" span="24" field="leaderUserId">
          <template #default>
            <el-input v-model="form.leaderUserId" type="text" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="联系电话" span="24" field="phone">
          <template #default>
            <el-input v-model="form.phone" type="text" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="机构类型" span="24" field="type">
          <template #default>
            <el-select
              v-model="form.type"
              class="filter-item"
              placeholder="请选择机构类型"
              style="width: 280px"
              clearable
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="状态" span="24" field="status">
          <template #default>
            <el-select
              v-model="form.status"
              class="filter-item"
              placeholder="请选择状态"
              style="width: 280px"
              clearable
            >
              <el-option label="启用" :value="0" />
              <el-option label="停用" :value="1" />
            </el-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="排序" span="24" field="sort">
          <template #default>
            <el-input-number
              v-model="form.sort"
              controls-position="right"
              :min="1"
              :max="1000"
              style="width: 160px"
              placeholder="请输入排序"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item title="备注" span="24" field="remark">
          <template #default>
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="7"
              placeholder="请输入备注"
            />
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button class="filter-item" type="primary" @click="save()">
          <i class="icon-wpkj-save"></i>
          保存
        </el-button>
        <el-button @click="close()">取消</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
  import { Finished } from '@element-plus/icons-vue'
  import { getNextChildNode, saveOrUpdate } from '@/api/system/dept/index'

  export default defineComponent({
    name: 'DepartmentManagementEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        fullscreenLoading: false,
        typeOptions: [
          { value: 0, label: '单位' },
          { value: 1, label: '处室' },
          { value: 2, label: '二级单位' },
          { value: 3, label: '科室' },
          { value: 4, label: '项目部' },
          { value: 5, label: '井队' },
          { value: 6, label: '其它' },
        ],
        form: {
          id: '',
          code: '',
          parentId: '',
          name: '',
          sort: 0,
          type: '',
          leaderUserId: '',
          parentName: '',
          phone: '',
          email: '',
          status: 0,
        },
        rules: {
          name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
          code: [{ required: true, trigger: 'blur', message: '请输入编码' }],
          type: [{ required: true, trigger: 'blur', message: '请输入类型' }],
          sort: [{ required: true, trigger: 'blur', message: '请输入排序' }],
          status: [
            { required: true, message: '状态不能为空', trigger: 'blur' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = async (row, but) => {
        if (but === 'add') {
          state.title = '添加'
          if (row && row.id) {
            state.form = {
              id: '',
              parentName: row.name,
              parentId: row.id,
              code: row.code,
            }
          } else {
            state.form = { id: '', parentName: '', parentId: 0, code: '' }
          }
          state.fullscreenLoading = true
          const { code, data, msg } = await getNextChildNode(state.form)
          state.form.sort = data.sort
          state.form.code = data.code
          state.fullscreenLoading = false
        } else {
          state.title = '编辑'
          state.form = JSON.parse(JSON.stringify(row))
        }
        state.dialogFormVisible = true
      }

      const save = async () => {
        const validate = await state['formRef']
          .validate()
          .catch((validate) => validate)

        if (!validate) {
          state.fullscreenLoading = true
          const { code, data, msg } = await saveOrUpdate(state.form)
          state.fullscreenLoading = false
          if (code === 0 || code === 200) {
            $baseMessage(msg, 'success')
            emit('fetch-data', data)
            close()
          } else {
            $baseMessage(msg, 'error')
          }
        }
      }

      const close = () => {
        state['formRef'].reset()
        state.form = {
          id: '',
          code: '',
          parentId: '',
          name: '',
          sort: 0,
          type: '',
          leaderUserId: '',
          parentName: '',
          phone: '',
          email: '',
          status: 0,
        }
        state.dialogFormVisible = false
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        Finished,
      }
    },
  })
</script>
